<% extends 'hr/weui_base.html' %>
<% block title %>主页<% endblock %>
<% block body %>
<script>
  var router_type = '${type|safe}';
</script>
<div id="leave_work">

    <div class="weui_tab tab-bottom">
        <div class="weui_tab_bd">
            <div class="weui_tab_bd_item"  style="display: block;">
                <div class="container">
                    <router-view class="view"></router-view>
                </div>
            </div>
        </div>
        <div class="weui_tabbar">
            <template v-for="operation in all_operation">
                <router-link :to="operation.link" class="weui_tabbar_item weui_bar_item_on"
                             v-show="show_num!='0'&&operation.link.params.approve_type=='unapprove'||
                         operation.link.params.approve_type=='all' ||!operation.link.params.approve_type || operation.link.params.approve_type=='approve'|| operation.link.params.approve_type=='other_approve'" >
                    <div class="weui_tabbar_icon">
                        <img :src="operation.img">
                    </div>
                    <div class="weui_tabbar_label">{{ operation.str }}
                        <span class="weui-badge" v-show="show_num!=0&&operation.link.params.approve_type=='unapprove'">
                        {{ show_num }}</span>
                    </div>
                </router-link>
            </template>
        </div>
    </div>
</div>
<toast-success v-bind:success_msg='success_msg'></toast-success>

<script type="text/x-template" id="container">
    <transition name="slide">
        <div class="container">

            <!--BEGIN toast-->
            <div id="toast" style="opacity: 100; display: none;">
                <div class="weui-mask_transparent"></div>
                <div class="weui-toast">
                    <i class="weui-icon-success-no-circle weui-icon_toast"></i>
                    <p class="weui-toast__content">{{ success_msg }}</p>
                </div>
            </div>
            <!--end toast-->
            <div style="opacity: 100; display: none;" id="loading_toast">
                <div class="weui-mask_transparent"></div>
                <div class="weui-toast">
                    <i class="weui-loading weui-icon_toast"></i>
                    <p class="weui-toast__content">{{ locading_msg }}</p>
                </div>
            </div>
            <!--<loading_toast :loading='loading'></loading_toast>-->
            <div class="page toast  preview js_show">
                <scroller
                        :on-refresh="refresh"
                        refresh-layer-color="#4b8bf4"
                        loading-layer-color="#ec4949"
                        :on-infinite="infinite">
                    <svg class="spinner" style="stroke: #4b8bf4;" slot="refresh-spinner" viewBox="0 0 64 64">
                        <g stroke-width="7" stroke-linecap="round">
                            <line x1="10" x2="10" y1="27.3836" y2="36.4931">
                                <animate attributeName="y1" dur="750ms" values="16;18;28;18;16;16"
                                         repeatCount="indefinite">
                                </animate>
                                <animate attributeName="y2" dur="750ms" values="48;46;36;44;48;48"
                                         repeatCount="indefinite">
                                </animate>
                                <animate attributeName="stroke-opacity" dur="750ms" values="1;.4;.5;.8;1;1"
                                         repeatCount="indefinite">
                                </animate>
                            </line>
                            <line x1="24" x2="24" y1="18.6164" y2="45.3836">
                                <animate attributeName="y1" dur="750ms" values="16;16;18;28;18;16"
                                         repeatCount="indefinite">
                                </animate>
                                <animate attributeName="y2" dur="750ms" values="48;48;46;36;44;48"
                                         repeatCount="indefinite">
                                </animate>
                                <animate attributeName="stroke-opacity" dur="750ms" values="1;1;.4;.5;.8;1"
                                         repeatCount="indefinite">
                                </animate>
                            </line>
                            <line x1="38" x2="38" y1="16.1233" y2="47.8767">
                                <animate attributeName="y1" dur="750ms" values="18;16;16;18;28;18"
                                         repeatCount="indefinite">
                                </animate>
                                <animate attributeName="y2" dur="750ms" values="44;48;48;46;36;44"
                                         repeatCount="indefinite">
                                </animate>
                                <animate attributeName="stroke-opacity" dur="750ms" values=".8;1;1;.4;.5;.8"
                                         repeatCount="indefinite">
                                </animate>
                            </line>
                            <line x1="52" x2="52" y1="16" y2="48">
                                <animate attributeName="y1" dur="750ms" values="28;18;16;16;18;28"
                                         repeatCount="indefinite">
                                </animate>
                                <animate attributeName="y2" dur="750ms" values="36;44;48;48;46;36"
                                         repeatCount="indefinite">
                                </animate>
                                <animate attributeName="stroke-opacity" dur="750ms" values=".5;.8;1;1;.4;.5"
                                         repeatCount="indefinite">
                                </animate>
                            </line>
                        </g>
                    </svg>

                    <div class="weui_cells" v-for="(record, index) in all_records">
                        <div class="weui_cell_bd">
                            <div class="weui-form-preview-bd" v-longtouch="longtouch_tree(index, record)">
                                <div class="weui-form-preview__item" v-for="field in record">
                                    <label class="weui-form-preview-label"
                                           v-if="!field.invisible">{{ field.label }}</label>
                                    <span class="weui-form-preview-value"
                                          v-if="!field.invisible&&!field.approve_flag">{{ field.value }}</span>
                                    <div class="weui-form-preview-value icon_sp_area" v-if="field.approve_flag">
                                        <i class="weui-icon-circle" v-if="field.value===0"></i>
                                        <i class="weui-icon-success" v-else-if="field.value===1"></i>
                                        <i class="weui-icon-cancel" v-else-if="field.value===-1"></i>
                                    </div>
                                </div>
                            </div>
                            <div class="weui-form-preview__ft">
                                <button class="weui-form-preview__btn weui-form-preview__btn_default "
                                        v-if="all_invisible"
                                        v-on:click.prevent="refuse_work_or_leave(record[0].value, index)"
                                        v-bind:value="record[0].value">拒绝
                                </button>
                                <button class="weui-form-preview__btn weui-form-preview__btn_primary"
                                        v-if="all_invisible"
                                        v-on:click.prevent="approver_work_or_leave(record[0].value, index)">通过
                                </button>
                                <button class="weui-form-preview__btn weui-form-preview__btn_primary"
                                        v-if="record[1].value !== 1 && $route.params.approve_type=='all'"
                                        v-on:click.prevent="change_approver_work_or_leave(record)">修改
                                </button>
                            </div>

                        </div>
                    </div>
                    <svg class="spinner" style="fill: #ec4949;" slot="infinite-spinner" viewBox="0 0 64 64">
                        <g>
                            <circle cx="16" cy="32" stroke-width="0" r="3">
                                <animate attributeName="fill-opacity" dur="750ms" values=".5;.6;.8;1;.8;.6;.5;.5"
                                         repeatCount="indefinite">
                                </animate>
                                <animate attributeName="r" dur="750ms" values="3;3;4;5;6;5;4;3"
                                         repeatCount="indefinite"></animate>
                            </circle>
                            <circle cx="32" cy="32" stroke-width="0" r="3.09351">
                                <animate attributeName="fill-opacity" dur="750ms" values=".5;.5;.6;.8;1;.8;.6;.5"
                                         repeatCount="indefinite"></animate>
                                <animate attributeName="r" dur="750ms" values="4;3;3;4;5;6;5;4"
                                         repeatCount="indefinite">
                                </animate>
                            </circle>
                            <circle cx="48" cy="32" stroke-width="0" r="4.09351">
                                <animate attributeName="fill-opacity" dur="750ms" values=".6;.5;.5;.6;.8;1;.8;.6"
                                         repeatCount="indefinite">
                                </animate>
                                <animate attributeName="r" dur="750ms" values="5;4;3;3;4;5;6;5"
                                         repeatCount="indefinite">
                                </animate>
                            </circle>
                        </g>
                    </svg>
                </scroller>
            </div>
        </div>
    </transition>
</script>

<script type="text/x-template" id="vue_grid">
    <div class="weui_grids">
        <div v-for="grid in all_grid">
            <router-link class="weui_grid js_grid" :to="grid.link">
                <div class="weui_grid_icon">
                    <img :src="grid.img_src" alt=""/>
                </div>
                <p class="weui_grid_label">{{ grid.show_str }}</p>
            </router-link>
        </div>
    </div>
</script>

<script type="text/x-template" id="test_scroller">
    <div class="weui_grids">
        404
    </div>
</script>
<script type="text/x-template" id="vue_cells">
    <div class="weui_cells weui_cells_access">
        <div v-for="operation in all_operation">
            <router-link class="weui_cell" :to="operation.link"
                <div class="weui_cell_bd weui_cell_primary">
                    <span style="vertical-align:middle">{{ operation.str }}</span>
                    <span v-show="show_num!=0&&operation.link.params.approve_type=='unapprove'"
                          class="weui-badge" style="margin-left: 5px;">{{ show_num }}</span>
                </div>
                <div class="weui_cell_ft">
                </div>
            </router-link>
        </div>
    </div>
</script>
<script type="text/x-template" id="vue_input_component">
    <div v-bind:class="{'weui_cell_warn':required &&!value, 'weui_cell':true}">
        <div class="weui_cell_hd"><label class="weui_label" v-bind:for="index">{{ input_str }}</label></div>
        <div class="weui_cell_hd weui_cell_primary">
            <input class="weui_input" v-if="input_type_detail=='text'" type="text" v-bind:id="index"
                   v-model="input_value" style="height: 40px"
                   :pattern="input_pattern"
                   :placeholder="input_str" :disabled="input_disabled"/>

            <input class="weui_input" v-else-if="input_type_detail=='number'" type="number"
                   v-model="input_value" v-bind:id="index" style="height: 40px"
                   :pattern="input_pattern"
                   :placeholder="input_str" :disabled="input_disabled"/>

            <input class="weui_input" v-else-if="input_type_detail=='datetime-local'"
                   type="datetime-local" style="height: 40px"
                   v-model="input_value" v-bind:id="index"
                   :pattern="input_pattern"
                   :placeholder="input_str" :disabled="input_disabled"/>
        </div>
        <div class="weui-cell__ft"><i
                v-bind:class="{'weui-icon-warn': input_required &&input_required_error&&!input_value}"></i>
        </div>
    </div>
</script>


<script type="text/x-template" id="vue_form_detail">
    <transition name="slide">
        <div>
            <div v-show="page_msg">
                <div class="weui-msg">
                    <div class="weui-msg__icon-area">
                        <i class="weui-icon-success weui-icon_msg" v-if="html_type=='success'">
                            <i class="weui-icon-warn weui-icon_msg" v-if="html_type!='success'"></i>
                        </i></div>
                    <div class="weui-msg__text-area">
                        <h2 class="weui-msg__title">申请成功</h2>
                        <p class="weui-msg__desc">成功添加<a href="javascript:void(0);"></a></p>
                    </div>
                    <div class="weui-msg__opr-area">
                        <p class="weui-btn-area">
                            <a href="javascript:history.back();" class="weui-btn weui-btn_primary">返回</a>
                        </p>
                    </div>
                </div>
            </div>
            <div class="weui_cells weui_cells_form" v-show="html_type=='normal'">
                <template v-for="(field, index) in all_fields">
                    <template v-if="field.type=='input' && !field.invisible">
                        <vue_input_val
                                :required.sync="field.required"
                                :value.sync="field.value"
                                :pattern.sync="field.pattern"
                                :str.sync="field.str"
                                :index.sync="index"
                                :disabled.sync="field.disabled"
                                :type_detail.sync="field.type_detail"
                                :required_error.sync="required_error"
                        ></vue_input_val>
                    </template>
                    <div v-else-if="field.type=='textarea' && !field.invisible" style="margin-top:0" class="weui_cells weui_cells_form">
                        <div v-bind:class="{'weui_cell_warn':field.required &&!field.value, 'weui_cell':true}">
                            <div class="weui_cell_bd weui_cell_primary">
                                <textarea class="weui_textarea" :placeholder="field.str" v-model="field.value"
                                          rows="3"></textarea>
                                <div class="weui_textarea_counter"><span>{{ field.value | length }}</span>/200</div>
                                <div class="weui_cell__ft"><i
                                        v-bind:class="{'weui-icon-warn': field.required &&required_error&&!field.value}"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                    <template v-else-if="field.type=='checkbox' && !field.invisible">
                        <div class="page-bd">
                            <div class="weui-cells__title" v-if="field.value_range.length!=0">{{ field.str}}
                            </div>
                            <div v-else-if="field.value_range.length==0">没有可用的加班，不能进行调休!</div>
                            <div class="weui_cells weui_cells_checkbox">
                                <label class="weui_cell weui_check_label" v-bind:for="value.id"
                                       v-for="(value, index) in field.value_range">
                                    <div class="weui_cell_hd">
                                        <input type="checkbox" class="weui_check" v-bind:id="value.id"
                                               v-bind:value="index" v-model="field.value">
                                        <i class="weui_icon_checked">
                                        </i>
                                    </div>
                                    <div class="weui_cell_bd weui_cell_primary">
                                        <p>{{ value.str }} </p>
                                    </div>
                                </label>
                                <div class="weui_cell__ft"><i
                                        v-bind:class="{'weui_icon_warn': field.required &&required_error&&!field.value}"></i>
                                </div>
                            </div>
                        </div>
                    </template>
                    <div class="weui-btn-area" v-show="all_fields.length ==index+1">
                        <button v-on:click.prevent="add_new_record" class="weui-btn weui-btn_primary">确认
                        </button>
                    </div>
                </template>
            </div>
        </div>
    </transition>
</script>
<script src="/dftg_weixin/static/src/js/hr/ask_for_leave.js?v1.0178"></script>
<% endblock %>
